<template>

    <template v-for="(item,index) in props.menuData">
      <el-menu-item 
    @click="handclick(item, `${props.index}-${item.meta.id}`)"
      v-if="!item.children || item.children.length == 0"
       :index="`${props.index}-${item.meta.id}`"
       :key="`${props.index}-${item.meta.id}`">
 
      <el-icon size="20">
        <component :is="item.meta.icon"></component>
          </el-icon>
        <span>{{item.meta.name}}</span>
         </el-menu-item>
        
    <el-sub-menu v-else 
    :index="`${props.index}-${item.meta.id}`">
      <template #title>
        <el-icon size="20">
        <component :is="item.meta.icon"></component>
         </el-icon>
       <span>{{item.meta.name}}</span>
      </template> 
      <Treemenu 
      :index="`${props.index}-${item.meta.id}`"
      :menuData="item.children"/>
    </el-sub-menu>
    </template>

  </template>

  
  <script setup>
  import { useRouter } from 'vue-router'
  import {useStore} from 'vuex'
  import Treemenu from './Treemenu.vue';
  
   const props=defineProps(['menuData','index'])
     //创建实例
   const router = useRouter() 
   const store =useStore()
   //点击菜单
    const handclick = (item,active) =>
   
    {console.log(item,'item')
    store.commit('addMenu',item.meta)
    store.commit('updateMenuActive',active)

    router.push(item.meta.path)
    
 
  }
  console.log("Menu Data to Render:", props.menuData);
  </script>
  
  <style  scoped>
  
  </style>
